<template>
  <div class="map-demo">
    <h2>百度地图实例</h2>
    <div id="mapContainer" class="map-container"></div>
  </div>
</template>

<script>
/* eslint-disable no-undef */
export default {
  name: 'MapDemo',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new BMap.Map('mapContainer');
      
      // 创建点坐标（北京天安门）
      const point = new BMap.Point(116.404, 39.915);
      
      // 初始化地图，设置中心点坐标和地图级别
      this.map.centerAndZoom(point, 15);
      
      // 添加地图控件
      this.map.addControl(new BMap.NavigationControl());
      this.map.addControl(new BMap.ScaleControl());
      this.map.addControl(new BMap.OverviewMapControl());
      this.map.addControl(new BMap.MapTypeControl());
      
      // 开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true);
      
      // 添加一些标记点
      this.addMarker(point, '天安门广场', '北京市东城区天安门广场');
      this.addMarker(new BMap.Point(116.397, 39.916), '故宫博物院', '北京市东城区景山前街4号');
      this.addMarker(new BMap.Point(116.407, 39.904), '王府井', '北京市东城区王府井大街');
    },
    
    addMarker(point, title, address) {
      // 创建标记
      const marker = new BMap.Marker(point);
      this.map.addOverlay(marker);
      
      // 创建文本标签
      const label = new BMap.Label(title, { offset: new BMap.Size(20, -10) });
      marker.setLabel(label);
      
      // 创建信息窗口
      const infoWindow = new BMap.InfoWindow(`
        <div style="padding: 10px;">
          <h4>${title}</h4>
          <p>地址：${address}</p>
          <p>坐标：${point.lng}, ${point.lat}</p>
        </div>
      `);
      
      // 点击标记时打开信息窗口
      marker.addEventListener('click', () => {
        this.map.openInfoWindow(infoWindow, point);
      });
    }
  }
}
</script>

<style scoped>
.map-demo {
  padding: 20px;
}

.map-demo h2 {
  text-align: center;
  color: #409EFF;
  margin-bottom: 20px;
}

.map-container {
  width: 100%;
  height: 500px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style> 